<script>
import { ElMessage } from 'element-plus'
import md5 from 'md5'
import axios from 'axios'

import { loginFn } from '@/api/user'


import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      adminname: '',
      password: ''
    }
  },
  computed: {
    // 将全局状态中的数据通过 mapState 辅助函数映射的方式获取
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['updateUserInfo']),
    submitForm () {
      // console.log('提交内容：', this.adminname, this.password);

      // if (this.adminname.length < 6) {
      //   // 提示用户长度不够
      //   ElMessage({
      //     showClose: true,
      //     message: '管理员账号要大于或者等于 6 位',
      //     type: 'error',
      //   })
      //   // 如果条件不成立，就直接不让代码继续执行了
      //   return
      // }

      // if (!/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/.test(this.password)) {
      //   ElMessage({
      //     showClose: true,
      //     message: '密码应该包含大写字母小写字母和一个特殊符号组成',
      //     type: 'error',
      //   })
      //   // 如果条件不成立，就直接不让代码继续执行了
      //   return
      // }

      // MD5 加密时担心密码会被解密，可以通过 拆解密码字符串，然后拼接一些特殊符号，来保证密码的安全性
      // console.log(md5('@千峰123教！育456集团~'));

      // 发送数据请求，进行用户的登录
      // 发送数据请求，可以直接使用 axios 进行发送请求
      // 如果页面请求的接口很多，服务器或者ip地址一旦发生改变，那么我们
      // 就需要修改很多个地方，所以我们需要将请求再次进行封装
      // axios.get('http://121.89.205.189:3000/api/pro/list')
      //   .then(function (response) {
      //     console.log(response);
      //   })
      //   .catch(function (error) {
      //     console.log(error);
      //   });

      // 发送数据请求
      loginFn({
        adminname: this.adminname,
        password: this.password
      }).then(res => {
        // console.log(res);
        if (res.code === '10005') {
          // 未注册
          ElMessage.error(res.message)
          return
        } else if (res.code === '10003') {
          // 密码错误
          ElMessage.error(res.message)
          return
        } else {

          // 第一步登录记录用户信息，第二步记录完用户信息跳转到首页

          // 登录成功
          // console.log(res.data);

          // 第一种修改数据的方法
          // this.$store.commit('updateUserInfo',res.data)

          // 第二种 通过 mapMutations 修改数据的方法
          this.updateUserInfo(res.data)

          // 在登录成功之后将 token 存到本地，方便我们后期请求时在拦截器中使用
          localStorage.setItem('token', res.data.token)

          // 跳转到首页
          // this.$router 是我们路由跳转对象
          // .push('/') 需要进入到哪个路由页面中
          this.$router.push('/')

        }


      })
    }
  }
}
</script>
<template>
  <div class="login-container">
    <div class="form-wrap">
      <h2 class="header"> 商城后台管理系统登录 {{ $store.state.count }} -- {{ count }} </h2>
      <el-input v-model="adminname" :minlength="6" clearable placeholder="请输入管理员账号" />
      <el-input v-model="password" clearable class="psw" placeholder="请输入密码" />
      <el-button type="success" @click="submitForm">登录</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-container {
  height: 100%;
  background-color: #e6fcf5;
  background-image: url('../assets/bg.jpeg');

  .form-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 15px;
    padding: 32px;

    .header {
      text-align: center;
      margin-bottom: 32px;
    }

    .psw {
      margin-top: 20px;
    }

    .el-button {
      width: 100%;
      margin-top: 20px;
    }
  }
}
</style>
